<!--
 * @Author: C.
 * @Date: 2021-06-18 10:05:19
 * @LastEditTime: 2021-06-18 10:23:39
 * @Description: file content
-->
<template>
  <div class="demo-box">
    <JvHeader @timeChange="timeChange"
              @query="query"
              @reset="reset"
              width="100%"></JvHeader>
    <JvHeader @timeChange="timeChange"
              @query="query"
              @reset="reset"
              width="100%">
      <el-form-item label="单据编号"
                    prop="BillId"
                    slot="pre-slot">
        <el-input placeholder="单据编号"
                  v-model="form.BillId" />
      </el-form-item>
    </JvHeader>

    <JvHeader @timeChange="timeChange"
              @query="query"
              @reset="reset"
              width="100%">
      <el-form-item label="单据编号"
                    prop="BillId">
        <el-input placeholder="单据编号"
                  v-model="form.BillId" />
      </el-form-item>
    </JvHeader>
    <JvHeader @timeChange="timeChange"
              @query="query"
              @reset="reset"
              width="100%">
      <el-form-item slot="btn-slot">
        <el-button @click="reset"
                   size="mini"
                   type="success"
                   icon="el-icon-refresh">
          刷新
        </el-button>
      </el-form-item>
    </JvHeader>
  </div>

</template>

<script>
import JvHeader from '../../../src/Jv_cpn/JvHeader'
export default {
  components: {
    JvHeader,
  },
  data () {
    return {
      form: {
        BillId: ''
      }

    }
  },
  methods: {
    timeChange (e) {
      this.$message({
        message: e,
        type: 'success'
      });
    },
    query () {
      this.$message({
        message: 'query',
        type: 'success'
      });
    },
    reset () {
      this.$message({
        message: 'reset',
        type: 'success'
      });
    },
  },
}
</script>

<style lang="scss">
.demo-box {
  width: 100%;
  jv-header {
    margin-bottom: 10px;
  }
}
</style>